<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AGV Http Server</title>
    <link rel="icon" href="{{ url_for('static',filename='img/favicon.ico') }}">
    <link href="{{ url_for('static',filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/w3.css') }}">
    <script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
    <script>
        $(function () {
            $("#submit").click(function (event) {
                event.preventDefault();
                var userInput = $('input[name="user"]');
                var user = userInput.val();
                var pwdInput = $("input[name='pwd']");
                var pwd = pwdInput.val();

                $.post({
                    'url': '/manage/login',
                    'data': {
                        'user': user,
                        'pwd': pwd
                    },
                    "success": function (data) {
                        if (data['code'] == 200) {
                            window.location = '/index'
                        } else {
                            var error = data['error'];
                            $("#error").html(error);
                            $("#error").show();
                        }
                    },
                    'fail': function (error) {
                        consle.log(error)
                    }
                });
            });
        });
    </script>
</head>

<body>

    <div class="w3-container w3-display-topmiddle">

        <form class="w3-container w3-card-4 w3-light-grey" style="width: 500px;" method="post">
            <h3 class="w3-center">用户登录</h3>
            <div class="w3-row w3-section">
                <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
                <div class="w3-rest">
                    <label for="inputName" class="sr-only">用户名</label>
                    <input type="text" id="inputName" class="w3-input w3-border" placeholder="用户名" name="user" required
                        autofocus>
                </div>
            </div>
            <div class="w3-row w3-section">
                <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
                <div class="w3-rest">
                    <label for="inputPassword" class="sr-only">密码</label>
                    <input type="password" id="inputPassword" class="w3-input w3-border" placeholder="密码" name="pwd"
                        required>
                </div>
            </div>

            <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding" id="submit"
                type="submit">Login</button>

            <p class="text-danger" style="display:none" id="error"></p>
        </form>

    </div>
</body>

</html>